<template>
	<div id="map-box">
		<!-- 鼠标控件 -->
		<div id="mouse-position"></div>
		<DirectoryTree></DirectoryTree>
		<!-- 图层切换 -->
		<div class="changeLayers">
			<el-button :class="mapState ? 'current' : 'noCurrent'" @click="toVector">
				<img src="../assets/img/global.jpg" alt="" />
				<span>卫星地图</span>
			</el-button>
			<el-button :class="mapState ? 'noCurrent' : 'current'" @click="toImage">
				<img src="../assets/img/map.jpg" alt="" />
				<span>矢量地图</span>
			</el-button>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex';
import DirectoryTree from './TransportUser/DirectoryTree.vue';
export default {
	name: 'BaseMap',
	components: { DirectoryTree },
	data() {
		return {
			mapState: false,
			map: null,
		};
	},
	computed: {
		...mapState(['roadsResult', 'isShowRoads', 'drawRoads']),
	},
	watch: {
		// 监听isShowRoads的状态，在地图上渲染实时路况
		isShowRoads(newvalue, oldvalue) {
			if (newvalue) {
				this.drawRoads.map((item) => {
					this.map.addLayer(item);
				});
			} else {
				let arr = this.map
					.getLayers()
					.array_.filter((item) => item.values_.title == '高亮显示');
				arr.map((item) => {
					this.map.removeLayer(item);
				});
			}
		},
	},
	mounted() {
		this.initMap();
	},
	methods: {
		// 初始化地图,加载各种控件
		initMap() {
			// ---------------------------加载地图文档和底图----------------------------
			var docName = 'guanggu'; //doc文档名称
			var docLayer = new Zondy.Map.Doc('', docName, {
				ip: 'localhost',
				port: 6163,
				crossOrigin: 'anonymous', //设置允许跨域下载图片
			});
			this.map = new ol.Map({
				//设置地图容器挂载到对应的DOM节点
				target: 'map-box',
				// 高德图源
				// layers: [gaodeVector, gaodeImage, docLayer, zhuji],
				//天地图图源
				layers: [
					TiandiMapVector,
					TiandiMapVector_zhuji,
					TiandiMapImg,
					TiandiMapImg_zhuji,
					docLayer,
				],
				//设置地图以什么样的方式显示
				view: new ol.View({
					center: [114.37, 30.5],
					projection: 'EPSG:4326',
					zoom: 13,
				}),
				interactions: new ol.interaction.defaults({
					doubleClickZoom: false, //屏蔽双击放大事件
				}),
			});
			this.$store.commit('addMap', this.map); //向vuex添加map对象
			this.$store.commit('addLayer', docLayer); //向vuex添加docLayer数据

			// --------------------------------------------控件-------------------------------------------

			// -------------【鹰眼控件】------------//
			//鹰眼控件
			const overviewMapControl = new ol.control.OverviewMap({
				/* 鹰眼控件样式  */
				class: 'ol-overviewmap ol-custom-overviewmap',
				layers: [gaodeImage, gaodeVector],
				/* 鹰眼控件展开时功能按钮上的标识(网页的JS的字符编码) */
				collapseLabel: '\u00BB',
				/* 鹰眼控件折叠时功能按钮上的标识(网页的JS的字符编码) */
				label: '\u00AB',
				/* 初始为展开显示方式 */
				collapsed: false,
				view: new ol.View({
					projection: 'EPSG:4326',
				}),
			});
			this.map.addControl(overviewMapControl); //加载鹰眼控件

			//-------------【比例尺控件】-------------
			//实例化比例尺控件（ScaleLine）
			var scaleLineControl = new ol.control.ScaleLine({
				//设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
				units: 'metric',
			});
			this.map.addControl(scaleLineControl); //加载比例尺控件

			// -------------【 视图跳转控件】-------------
			const ZoomToExtent = new ol.control.ZoomToExtent({
				extent: [114.401, 30.46, 114.402, 30.55], //跳转回地图文档区域
			});
			this.map.addControl(ZoomToExtent); //加载视图跳转控件
			//-------------【鼠标位置控件】-------------
			// 实例化鼠标位置控件（MousePosition）
			const mousePositionControl = new ol.control.MousePosition({
				/* 坐标格式 */
				coordinateFormat: ol.coordinate.createStringXY(4),
				//地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
				projection: 'EPSG:4326',
				/* 坐标信息显示样式类名,默认是'ol-mouse-position' */
				className: 'custom-mouse-position',
				target: document.getElementById('mouse-position'), //显示鼠标位置信息的目标容器
				undefinedHTML: '&nbsp', //未定义坐标的标记
			});
			this.map.addControl(mousePositionControl); //加载鼠标位置控件
			// -------------【ZoomSlider控件】-------------
			//实例化ZoomSlider控件并加载到地图容器中
			var zoomslider = new ol.control.ZoomSlider();
			this.map.addControl(zoomslider); //加载ZoomSlider控件
			TiandiMapImg.setVisible(false); //默认图层为矢量图层
			TiandiMapImg_zhuji.setVisible(false);
		},
		// ---------------------------------------------切换图层----------------------------------------------------
		toVector() {
			TiandiMapImg.setVisible(true);
			TiandiMapImg_zhuji.setVisible(true);
			this.mapState = true;
		},
		toImage() {
			TiandiMapImg.setVisible(false);
			TiandiMapImg_zhuji.setVisible(false);
			this.mapState = false;
		},
	},
};
</script>

<style scoped>
#map-box {
	position: absolute;
	width: 100vw;
	height: 100vh;
}

/* 切换图层按钮 */
.changeLayers {
	position: absolute;
	z-index: 200;
	bottom: 10px;
	right: 50px;
	display: flex;
	justify-content: space-around;
}
.changeLayers button {
	position: relative;
	width: 80px;
	height: 80px;
	padding: 5px;
	outline: none;
	/* border: 2px solid rgb(21, 224, 99); */
}
.changeLayers .current {
	border: 2px solid rgb(216, 85, 9);
}
.noCurrent {
	border: 2px solid rgb(224, 221, 219);
}
.changeLayers img {
	height: 100%;
	width: 100%;
}
.changeLayers span {
	position: absolute;
	bottom: 8px;
	left: 10%;
	font-size: 14px;
	color: rgb(12, 25, 212);
}
/* 鼠标位置控件层样式设置 */
#mouse-position {
	position: absolute;
	bottom: 10px;
	left: 50%;
	width: 200px;
	height: 30px;
	/*在地图容器中的层，要设置z-index的值让其显示在地图上层*/
	z-index: 200;
	line-height: 30px;
	text-align: center;
	background: rgba(197, 193, 193, 0.5);
}
/* 鼠标位置信息自定义样式设置 */
.custom-mouse-position {
	color: rgb(240, 20, 20);
	font-size: 12px;
	font-family: '微软雅黑';
}

/* 比例尺 */
.ol-scale-line-inner {
	margin-left: 50px;
	border: 1px solid #eee;
	border-top: none;
	color: #eee;
	font-size: 10px;
	text-align: center;
	margin: 1px;
	will-change: contents, width;
	transition: all 0.25s;
}
</style>
